<template>
	<div class="domestic">
		<div class="domestic-img">
			<ul>
				<li v-for="item in img" :key="item.id">
					<img :src="item.img"/>
					<h3>{{item.title}}</h3>
					<p>{{item.lable}}</p>
				</li>
				
			</ul>			
		</div>
		<div class="domestic-bottom">
			<ol>
				<li v-for="item in menu" :key="item.id"><span>{{item.span}}</span>{{item.title}}</li>		
			</ol>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Domestic',
		data(){
			return{
				img:[
					{id:1,img:'imgss/Domestic1.jpg',title:'雪乡',lable:'梦幻雪景'},
					{id:2,img:'imgss/Domestic2.jpg',title:'牛背山',lable:'王者归来'},
					{id:3,img:'imgss/Domestic3.jpg',title:'可纳斯',lable:'冬日仙境'},
				],
				menu:[
					{id:1,title:'三峡',span:'巴楚红叶'},
					{id:2,title:'栖霞山',span:''},
					{id:3,title:'长白山',span:''},
					{id:4,title:'海南',span:''},
					{id:5,title:'三门霞',span:'天鹅摄影'},
					{id:6,title:'无量山',span:''},
				]
			}
		}
	}
</script>

<style scoped>
	.domestic-img{
		position: relative;
	}
	.domestic-img ul{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 95%;
		margin: 0 auto;
	}
	.domestic-img ul li{
		width: 32.5%;
	}
	.domestic-img ul li img{
		width: 100%;		
	}
	.domestic-img ul li:first-child img{
		border-radius: 0.2rem 0 0 0.2rem;
	}
	.domestic-img ul li:last-child img{
		border-radius: 0 0.2rem 0.2rem 0 ;
	}
	.domestic-img ul li h3{
		width: 100%;
		font-size: 0.4rem;
		font-weight: bold;
		text-align: center;
		position: relative;
		bottom: 1rem;
		color: white;
	}
	.domestic-img ul li p{
		color: gray;
		text-align: center;
		position: relative;
		bottom: 0.8rem;
	}
	.domestic .domestic-bottom{
		margin-top: -0.3rem;
	}
	.domestic .domestic-bottom ol{
		width: 99%;		
	}
	.domestic .domestic-bottom ol li{
		float: left;
		width: 31%;
		text-align: center;
		line-height: 1rem;
		border: 0.01rem solid gainsboro;
		margin-left: 0.15rem;
		margin-top: 0.15rem;
		font-size: 0.38rem;
		font-weight: bold;
		position: relative;
	}
	.domestic .domestic-bottom ol li span{
		font-size: 0.05rem;
		font-weight: normal;
		position: absolute;
		background-color: gold;
		line-height: 0.25rem;
		left: 0;
	}
</style>
